<!--
 * @Description:
 * @Author 卞鹏飞 <228443632@qq.com>
 * @create 02/08/24 4:51 PM
 -->
<!--default-->
<script>
export default { name: 'Demo' }
</script>
<!--setup-->
<script setup>
import { onMounted, getCurrentInstance, ref } from 'vue'
import excelUtil from '@shared/base/base-query-table/utils/excel-util'
import BaseQueryTable from '@shared/base/base-query-table/index.vue'

const { proxy } = getCurrentInstance()
const props = defineProps({})
const emit = defineEmits([])

/* 状态 */
const queryTable = ref({
  autoFillEmptySlotBySymbol: true,
  rowspanColumnNames: ['date'],
  elTableAttrs: {
    border: true
  },
  columns: [
    { label: '还款流水号', prop: 'bankStatementNo', minWidth: 168, fixed: 'left' },
    {
      label: '进件号1',
      prop: 'date',
      minWidth: 260,
      children: [
        // { label: '进件号2-子', prop: 'state', minWidth: 260 },
        // { label: '进件号2-子', prop: 'city', minWidth: 260 },
        // { label: '进件号2-子', prop: 'address', minWidth: 260 },
        // { label: '进件号2-子', prop: 'zip', minWidth: 260 }
      ]
    },
    { label: '进件号2', prop: 'name', minWidth: 260 },
    { label: '进件号3', prop: 'address', minWidth: 260 }
  ],
  data: [
    {
      date: '2016-05-03',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles'
    },
    {
      date: '2016-05-03',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles'
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles'
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles'
    }
  ]
})

/* 方法 */

const onExport = () => {
  excelUtil.excelExportNormal({ columns: queryTable.value.columns, data: queryTable.value.data, filename: '还款流水' })
}

// 初始化
const init = async () => {}

/* 计算 */

/* 监听 */

/* 周期 */
onMounted(() => {
  init()
})

/* 暴露 */
defineExpose({
  $: proxy.$
})
</script>

<!--render-->
<template>
  <div class="page p-16px h-page bg-[#fff]">
    <el-button @click="onExport">
      导出
    </el-button>

    <!-- 内容区 -->
    <BaseQueryTable
      ref="baseQueryTableRef"
      v-bind="queryTable"
    />
  </div>
</template>

<!--style-->
<style scoped lang="less">
.page {
}
</style>
